<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <link href="/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var totalRecord, currentPage;

        $(function () {
            // 获取所有的部门并展示
            getDept("#dId");

            // 打开首页
            to_page(1);
        });

        // 跳转到指定页面
        function to_page(pn) {
            $.ajax({
                url: "/empsjson?pn=" + pn,
                data: $("#query").serialize(),
                type: "GET",
                async: false,
                success: function (result) {
                    console.log(result);
                    // 1. 解析并显示分页信息
                    build_emps_table(result);
                    // 2. 解析并显示分页信息
                    build_page_info(result);
                    // 3. 解析显示分页数据
                    build_page_nav(result);

                }
            });

        }

        // 点击查询按钮
        $(document).on("click", "#query-btn", function () {
            to_page(1);
        });

        // 解析并显示分页信息
        function build_emps_table(result) {
            // 先清除 emps_table 的内容，避免页面内容叠加
            $("#emps_table tbody").empty();

            // 解析数据
            var emps = result.extend.pageInfo.list;
            $.each(emps, function (index, item) {
                // var empIdTd = $("<td></td>").append(item.empId);
                var empIdTd = $("<td></td>").append(index + 1);
                var empNameTd = $("<td></td>").append(item.empName);
                var genderTd = $("<td></td>").append(item.gender === 'M' ? "男" : "女");
                var emailTd = $("<td></td>").append(item.email);
                var deptNameTd = $("<td></td>").append(item.department.deptName);
                // 编辑按钮
                var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-pencil").attr("aria-hidden", "true"))
                    .append("编辑");
                // 为编辑按钮添加一个自定义属性，来表示当前员工的empId
                editBtn.attr("edit-id", item.empId);
                // 删除按钮
                var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash").attr("aria-hidden", "true"))
                    .append("删除");
                // 为删除按钮添加一个自定义属性，来表示当前员工的empId
                delBtn.attr("del-id", item.empId);
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                $("<tr></tr>").append(empIdTd)
                    .append(empNameTd)
                    .append(genderTd)
                    .append(emailTd)
                    .append(deptNameTd)
                    .append(btnTd)
                    .appendTo("#emps_table tbody");
            });
        }

        // 解析并显示分页信息
        function build_page_info(result) {
            // 先清除内容，避免页面内容叠加
            $("#page_info_area").empty();

            // 解析并显示
            $("#page_info_area").append("当前第" + result.extend.pageInfo.pageNum + "页,总"
                + result.extend.pageInfo.pages + "页,总"
                + result.extend.pageInfo.total + "条记录");

            totalRecord = result.extend.pageInfo.total;
            currentPage = result.extend.pageInfo.pageNum;
        }

        // 解析显示分页数据
        function build_page_nav(result) {
            // 先清除内容，避免页面内容叠加
            $("#page_info_nav").empty();

            // 父元素
            var ul = $("<ul></ul>").addClass("pagination");

            // 首页
            var firstPageLi = $("<li></li>").append($("<a></a>").attr("href", "#").append("首页"));

            // 前一页
            var prePageLi = $("<li></li>").append($("<a></a>").attr("href", "#").attr("aria-label", "Previous")
                .append($("<span>" + "&laquo;" + "</span>").attr("aria-hidden", "true")));

            // 如果当前页是第1页，则首页和前一页元素禁用
            if (result.extend.pageInfo.hasPreviousPage === false) {
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            } else {
                // 首页元素绑定点击事件
                firstPageLi.click(function () {
                    to_page(1);
                });

                // 前一页元素绑定点击事件
                prePageLi.click(function () {
                    to_page(result.extend.pageInfo.pageNum - 1);
                });
            }

            // 父元素添加首页、前一页元素
            ul.append(firstPageLi).append(prePageLi);

            // 导航页号
            $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
                var numLi = $("<li></li>").append($("<a></a>").attr("href", "#").append(item));
                // 如果页码等于当前页码显示成激活状态
                if (result.extend.pageInfo.pageNum === item) {
                    numLi.addClass("active");
                }
                // 绑定点击跳转到指定页码事件
                numLi.click(function () {
                    to_page(item);
                });
                // 父元素添加导航页码元素c
                ul.append(numLi);
            });

            // 后一页
            var nextPageLi = $("<li></li>").append($("<a></a>").attr("href", "#").attr("aria-label", "Previous")
                .append($("<span>" + "&raquo;" + "</span>").attr("aria-hidden", "true")));

            // 尾页
            var lastPageLi = $("<li></li>").append($("<a></a>").attr("href", "#").append("尾页"));

            // 如果当前页是最后一页，则首页和前一页元素禁用
            if (result.extend.pageInfo.hasNextPage === false) {
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            } else {
                // 后一页元素绑定点击事件
                nextPageLi.click(function () {
                    to_page(result.extend.pageInfo.pageNum + 1);
                });

                // 尾页元素绑定点击事件
                lastPageLi.click(function () {
                    to_page(result.extend.pageInfo.pages);
                });
            }

            // 父元素添加后一页、尾页元素，并将父元素添加到<nav>里面
            ul.append(nextPageLi).append(lastPageLi).appendTo("#page_info_nav");
        }

        // 清空表单样式及内容
        function reset_form(ele) {
            // 清空表单内容
            $(ele)[0].reset();
            // 清空表单样式
            $(ele).removeClass("has-error has-success");
            $(ele).find(".help-block").text("");

        }

        // 点击新增按钮触发新增模态框
        $(document).on("click", "#emp_add_modal_btn", function () {
            // 清除表单数据(表单重置)
            reset_form("#empAddModal form");

            // 发送ajax请求，查出部门信息，显示在下拉列表中
            getDepts("#dept_add_select");

            // 弹出模态框
            $("#empAddModal").modal({
                backdrop: "static"
            });
        });

        // 查出所有的部门信息并显示在下拉表中
        function getDepts(ele) {
            // 清空之前下拉列表的值
            $(ele).empty();
            // 发送ajax请求获取部门信息并显示
            $.ajax({
                url: "/depts",
                type: "GET",
                success: function (result) {
                    console.log(result);
                    $.each(result.extend.depts, function (index, item) {
                        var option = $("<option></option>").append(this.deptName).attr("value", this.deptId);
                        option.appendTo(ele);
                    });
                }
            });
        }

        // 查询页面：查出所有的部门信息并显示在下拉表中
        function getDept(ele) {
            // 清空之前下拉列表的值
            $(ele).empty();
            // 发送ajax请求获取部门信息并显示
            $.ajax({
                url: "/depts",
                type: "GET",
                async: false,
                success: function (result) {
                    $("<option></option>").append("全部").attr("value", "0").appendTo(ele);

                    $.each(result.extend.depts, function (index, item) {
                        var option = $("<option></option>").append(this.deptName).attr("value", this.deptId);
                        option.appendTo(ele);
                    });
                }
            });
        }

        // 点击保存发送表格中的员工信息给后台
        $(document).on("click", "#emp_save_btn", function () {
            // 1. 模态框中填写的表单数据提交给服务器进行保存
            // 1.1 先对要提交给服务器的数据进行校验
            if (!validate_add_form()) {
                return false;
            }
            // 1.2 判断用户名是否可用
            if ($("#emp_save_btn").attr("ajax-value") == "error") {
                return false;
            }

            // 2. 发送ajax请求保存员工
            $.ajax({
                url: "/empjson",
                type: "POST",
                data: $("#empAddModal form").serialize(),
                success: function (result) {
                    if (result.code == 100) {
                        // 员工保存成功
                        // 1. 关闭模态框
                        $("#empAddModal").modal('hide');
                        // 2. 来到最后一页，显示刚才保存的数据
                        to_page(totalRecord);
                    } else {
                        // 显示失败信息
                        // console.log(result);
                        if (undefined != result.extend.errorFields.email) {
                            // 显示邮箱错误信息
                            show_validate_msg("#email_add_input", "error", result.extend.errorFields.email);
                        }
                        if (undefined != result.extend.errorFields.empName) {
                            // 显示用户名错误信息
                            show_validate_msg("#empName_add_input", "error", result.extend.errorFields.empName);
                        }
                    }
                }
            });
        });

        // 校验表单数据
        function validate_add_form() {
            // 1. 拿到要校验的数据，使用正则表达式
            var empName = $("#empName_add_input").val();
            var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
            if (!regName.test(empName)) {
                show_validate_msg("#empName_add_input", "error", "用户名必须是2-5位中文或者6-16位英文和数字的组合");
                return false;
            }else{
                show_validate_msg("#empName_add_input", "success", "");
            };

            //2、校验邮箱信息
            var email = $("#email_add_input").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)){
                //alert("邮箱格式不正确");
                //应该清空这个元素之前的样式
                show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
                return false;
            }else{
                show_validate_msg("#email_add_input", "success", "");
            }
            return true;

        }

        //显示校验结果的提示信息
        function show_validate_msg(ele,status,msg){
            //清除当前元素的校验状态
            $(ele).parent().removeClass("has-success has-error");
            $(ele).next("span").text("");
            if("success"==status){
                $(ele).parent().addClass("has-success");
                $(ele).next("span").text(msg);
            }else if("error" == status){
                $(ele).parent().addClass("has-error");
                $(ele).next("span").text(msg);
            }
        }

        // 发送ajax请求校验用户名是否可用
        $(document).on("change", "#empName_add_input", function () {

            var empName = this.value;
            $.ajax({
                url: "/checkuserjson",
                data: "empName=" + empName,
                type: "GET",
                success:function (result) {
                    if (result.code === 100) {
                        show_validate_msg("#empName_add_input", "success", "用户名可用");
                        $("#emp_save_btn").attr("ajax-value", "success");
                    } else {
                        show_validate_msg("#empName_add_input", "error", result.extend.va_msg);
                        $("#emp_save_btn").attr("ajax-value", "error");
                    }
                }
            });
        });

        // 点击编辑按钮弹出模态框
        $(document).on("click", ".edit_btn", function () {

            // 1. 查出部门信息，并显示部门列表
            getDepts("#dept_update_select");
            // 2. 查询员工信息，显示员工信息
            getEmp($(this).attr("edit-id"));
            // 把员工的id传递给模态框的更新按钮，并弹出模态框
            $("#emp_update_btn").attr("edit-id", $(this).attr("edit-id"));
            $("#empUpdateModal").modal({
                backdrop: "static"
            });

        });

        // 根据id查询员工信息
        function getEmp(id) {
            $.ajax({
                url: "/empjson/" + id,
                type: "GET",
                success: function (result) {
                    // console.log(result);
                    var empData = result.extend.emp;
                    $("#empName_update_static").text(empData.empName);
                    $("#email_update_input").val(empData.email);
                    $("#empUpdateModal input[name=gender]").val([empData.gender]);
                    $("#empUpdateModal select").val([empData.dId]);
                }

            });
        }

        // 点击更新，更新员工
        $(document).on("click", "#emp_update_btn", function () {

        // });
        // $("#emp_update_btn").click(function () {
            // 验证邮箱是否合法
            // 校验邮箱信息
            var email = $("#email_update_input").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)){
                //alert("邮箱格式不正确");
                //应该清空这个元素之前的样式
                show_validate_msg("#email_update_input", "error", "邮箱格式不正确");
                return false;
            }else{
                show_validate_msg("#email_update_input", "success", "");
            }

            // 发送ajax请求保存更新的员工数据
            // $.ajax({
            //     url: "/empjson/" + $(this).attr("edit-id"),
            //     type: "POST",
            //     data: $("#empUpdateModal form").serialize() + "&_method=PUT",
            //     success: function () {
            //         alert(result.msg);
            //     }
            //
            // });
            $.ajax({
                url: "/empjson/" + $(this).attr("edit-id"),
                type: "PUT",
                data: $("#empUpdateModal form").serialize(),
                success: function () {
                    // alert(result.msg);
                    // 1. 关闭模态框
                    $("#empUpdateModal").modal("hide");
                    // 2. 回到本页面
                    to_page(currentPage);

                }

            });
        });

        // 点击员工的删除按钮，删除员工
        $(document).on("click", ".delete_btn", function () {
            // 1. 弹出是否确认删除的对话框
            var empName = $(this).parents("tr").find("td:eq(1)").text();
            var empId = $(this).attr("del-id");
            if (confirm("确认删除 " + empName + "吗？")) {
                // 确认之后发送ajax请求删除员工
                $.ajax({
                    url: "/empjson/" + empId,
                    type: "DELETE",
                    success:function (result) {
                        alert(result.msg);
                        // 回到本页
                        to_page(currentPage);
                    }
                });
            }
        });


    </script>
</head>
<body>

    <!--搭建显示页面-->
    <div class="container">
        <!--标题行-->
        <div class="row">
            <div class="col-md-12 text-center">
                <h1>员工列表</h1>
            </div>
        </div>

        <!--空白行-->
        <div class="row">
            <br/>
        </div>

        <!--按钮行-->
        <div class="row">
            <div class="col-md-offset-1">
                <form class="form-inline" id="query">
                    <div class="form-group">
                        <label for="empName">姓名</label>
                        <input type="text" class="form-control" id="empName" name="empName">
                    </div>
                    <div class="form-group">
                        <label class="control-label">性别</label>
                        <input type="text" class="form-control" name="gender">
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" class="form-control" id="email" name="email">
                    </div>
                    <div class="form-group">
                        <label class="control-label">部门</label>
                        <select class="form-control" name="dId" id="dId"></select>
                    </div>
                    <button type="button" class="btn btn-primary" id="query-btn">查询</button>
                </form>
            </div>
            <div class="col-md-2 col-md-offset-10">
                <button class="btn btn-primary btn-sm" id="emp_add_modal_btn">新增</button>
                <button class="btn btn-danger btn-sm">删除</button>
            </div>
        </div>
        <!--显示表格数据-->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped table-hover" id="emps_table">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>员工姓名</th>
                            <th>性别</th>
                            <th>邮箱</th>
                            <th>部门</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <!--显示分页信息-->
        <div class="row">
            <!--分页文字信息-->
            <div class="col-md-6" id="page_info_area"></div>
            <!--分页条信息-->
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                    <nav style="text-align: right" id="page_info_nav"></nav>
                </nav>
            </div>

        </div>

    </div>

    <!-- 员工添加的模态框 -->
    <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增员工</h4>
                </div>
                <div class="modal-body">
                    <!--新增表单-->
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="empName_add_input" class="col-sm-2 control-label">员工姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="empName_add_input" name="empName" placeholder="张三">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email_add_input" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="email_add_input" name="email" placeholder="zhangsan@163.com">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">部门</label>
                            <div class="col-sm-4">

                                <select class="form-control" name="dId" id="dept_add_select"></select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 员工修改的模态框 -->
    <div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">更新员工</h4>
                </div>
                <div class="modal-body">
                    <!--新增表单-->
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="empName_add_input" class="col-sm-2 control-label">员工姓名</label>
                            <div class="col-sm-10">
<!--                                <input type="text" class="form-control" id="empName_update_input" name="empName" placeholder="张三">-->
<!--                                <span class="help-block"></span>-->
                                <p class="form-control-static" id="empName_update_static"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email_add_input" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="email_update_input" name="email" placeholder="zhangsan@163.com">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">部门</label>
                            <div class="col-sm-4">

                                <select class="form-control" name="dId" id="dept_update_select"></select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
                </div>
            </div>
        </div>
    </div>

</body>
</html>